<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				margin-top: 100px;
			}
		 .earth-rotate{
			 margin: auto;/*横向居中*/
			 width: 310px;
			 height: 310px;
			 /*设置背景图片 url属性指向图片,url里不需要双引号括起来,直接写*/
			 background-image: url(img/03-代码/earth.png);
			 
			 /*圆角*/
			 border-radius: 155px;
			 
			 /*旋转:谷歌浏览器提供的动画,run动画名称,5s执行一遍耗时,
			 旋转轨迹:linear线型
			 0s:播放前过渡时间  infinite:无限次循环*/
			 -webkit-animation: run 10s linear 0s infinite;
		 }
		 /*谷歌浏览器提供的关键帧写法*/
		 @-webkit-keyframes run{
			 /*0~360 旋转一周*/
		 	from{-webkit-transform: rotate(0deg);}
		 	to{-webkit-transform: rotate(360deg);}
		 }
		 .earth-rotate:hover{
			 /*暂停动画播放:play-state*/
			 -webkit-animation-play-state: paused;
		 }
		</style>
	</head>
	<body>
		<div class="earth-rotate"></div>
	</body>
</html>
